<template>
    <div id="position" class="position">
        <div id="head">
            <!-- <router-link to='/mine/addTrend?type=2' v-if="$route.query.type==2" class="addTrend"><i class="el-icon-arrow-left toback"></i></router-link> -->
           地址选择
        </div>
        <div class="province pct">
            <span>省</span>
            <el-select key="province" v-model="province" placeholder="请选择" @change="cityItems">
                <el-option
                    v-for="(item,index) in provinces"
                    :key="index"
                    :label="item"
                    :value="item">
                </el-option>
            </el-select>
        </div>
        <div class="city pct">
            <span>市</span>
            <el-select key="city" v-model="city" placeholder="请选择" @change="townItems">
                <el-option
                    v-for="(item,index) in citys"
                    :key="index"
                    :label="item"
                    :value="item">
                </el-option>
            </el-select>
        </div>
        <div class="town pct">
            <span>县</span>
            <el-select key="town" v-model="town" placeholder="请选择" @change="townval">
                <el-option
                    v-for="(item,index) in towns"
                    :key="index"
                    :label="item"
                    :value="item">
                </el-option>
            </el-select>
        </div>
        <div class="pct-detail pct">
            <span>街道</span>
            <input type="text" name="" placeholder="具体地址" v-model="detail">
        </div>
        <div class="submit">
            <p @click="sure">确定</p>
            <p onclick="history.go(-1)">取消</p>
        </div>
        
    </div>
</template>

<script>
import {GP,GT,GC} from '../../../config/provincesData.js'
export default {
    data(){
        return {
            indexOne:'',
            provinces:[],
            citys:[],
            towns:[],
            detail:'',
            province: '',
            city:'',
            town:''
        }
    },
    mounted(){
        this.provinces = GP
    },
    methods: {
        cityItems(event){
            let index = this.provinces.indexOf(event);
            this.indexOne = index
            this.citys = GT[index]
            this.$store.commit('changeProvince',{val:event});
        },
        townItems(event){
            let index = this.citys.indexOf(event);
            this.towns = GC[this.indexOne][index]
            this.$store.commit('changeCity',{val:event});
        },
        townval(event){
            this.$store.commit('changeTown',{val:event});
        },
        sure(){
            this.$store.commit('changeDetail',{val:this.detail});
            this.$store.commit('changeAddress');
            this.$router.back(-1);
        }
    }
}
</script>
<style>
	#position .el-input__inner{ display: block; margin-top: .2rem; border: 0px; width: 100%;}
</style>
<style scoped >
select,input {
    width: 40%;
    border: none;
    /* border-bottom: none; */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    height: 2.8rem;
    line-height: 2.8rem;
    font-size: 1rem;
    margin-left: 10%;
    outline:none;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
#position {
    width: 100%;
    height: 2.5rem;
    box-sizing:border-box;
    font-size:1rem;
}
.position{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #ffffff;
}
#head{
    background: -moz-linear-gradient(top, #00AA76 0%, #1ACCAC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AA76), color-stop(100%,#1ACCAC));
    background: -webkit-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -o-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -ms-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: linear-gradient(to right, #00AA76 0%,#1ACCAC 100%);
    font-size:1.2rem;
    color:#ffffff;
    text-align:center;
    height:3rem;
    line-height:3rem;
}
.pct{
    display:flex;
    width: 100%;
    height: 3rem; border-bottom: solid 0.05rem #eee;
    padding: 0 3%;
}
.pct span{
    display: block;
    line-height: 3rem;
    height: 3rem;
    font-size:1rem;
}
.submit{
    display: flex;
    position: fixed;
    bottom: 0;
    width:100%;
    background: #00AA76;
    color: #fff;
}
.submit p{
    width:50%;
    height:3rem;
    line-height:3rem;
    text-align:center;
}
.el-select{
    margin-left:2rem;
    width: 85%;
}
.el-input__inner{
    height:3rem;
    
}
.toback{
    position: absolute;
    color: #ffffff;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    line-height: 3rem;
    font-size: 2rem;
    padding-left: 0.5rem;
    z-index: 100;
}
</style>
